<template>
<div id="commonTag">
    <!-- 首页 tag -->
    <el-tag
    class="commonTagItem" 
    @click="tagClick(homeData)"
    :effect="isHighlight(homeData) ? 'dark' : 'plain'">{{ homeData.label }}</el-tag>
    <!-- 动态 tag -->
    <el-tag closable 
    class="commonTagItem"
    v-for="item in routerList" 
    :key="item.path"
    @click="tagClick(item)"
    @close="tagClose(item)"
    :effect="isHighlight(item) ? 'dark' : 'plain'">{{ item.label }}</el-tag>
</div>
</template>

<script>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { defineComponent, reactive, toRefs, onBeforeMount, onMounted, computed } from 'vue'
export default defineComponent({
    name: 'CommonTag',
    setup() {
        const router = useRouter()
        const store = useStore()
        const isHighlight = (item)=>{ // 判断当前的路由路径是否为 tag 的路由对象，是则突出显示
            const routerPaht = store.state.Tag.routerPaht
            return JSON.stringify(routerPaht) === JSON.stringify(item)
        }
        const tagClick = (item)=>{ // tag 点击事件
            if(isHighlight(item)) return
            router.push({
                path: item.path
            })
        }
        const tagClose = (item)=>{ // tag 关闭事件
            store.commit('Tag/REMOVEROUTERPAHT', item)
        }
        const routerList = computed(()=>store.state.Tag.routerPahtList)

        const data = reactive({
            homeData:{ // 首页路由路径对象
                label: '首页',
                path: '/home',
            },
            isHighlight,
            tagClick,
            tagClose,
            routerList
        })
        onBeforeMount(() => {
            // 组件挂载页面之前执行
        })
        onMounted(() => {
            // 组件挂载到页面之后执行
        })
        return {
            ...toRefs(data),
        }
    },
})
</script>

<style scoped>
#commonTag{
    height: 36px;
    min-height: 36px;
    width: auto;
    padding-left: 20px;
    overflow-x: overlay;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    margin-bottom: 10px;
}
#commonTag::-webkit-scrollbar{
    height: 6px;
    background-color: transparent;
}
#commonTag::-webkit-scrollbar-thumb{
    background-color: #666;
    border-radius: 6px;
}
.commonTagItem{
    margin-right: 10px;
    cursor: pointer;
}
</style>